<script lang="ts" setup>
import { TableCellBtn } from "../utils/types"
import { MoreFilled } from '@element-plus/icons-vue'
import { computed } from "vue"
import { genKey, isArr } from "../utils"

const props = defineProps<{
  btns: TableCellBtn | TableCellBtn[]
}>()

const cls = 'ui-cell-btns'

const convertedBtns = computed(() => {
  const btns = (isArr(props.btns) ? props.btns : [props.btns]) as TableCellBtn[]
  return btns
    .filter(_ => _)
    .map(_ => ({ ..._, _key: genKey() }))
})

const items = computed(() => {
  const btns = convertedBtns.value
  return btns.length > 3 ? btns.slice(0, 2) : btns
})

const dropdownItems = computed(() => {
  const btns = convertedBtns.value
  return btns.length > 3 ? btns.slice(2) : []
})
</script>

<template>
  <div :class="cls">
    <ElLink
      v-for="_ in items"
      :key="_._key"
      :underline="false"
      type="primary"
      v-bind="_">{{ _.label }}</ElLink>
    <ElDropdown v-if="dropdownItems.length" trigger="click">
      <ElLink title="更多操作" :underline="false" type="primary" :icon="MoreFilled" />
      <template #dropdown>
        <ElDropdownMenu>
          <ElDropdownItem v-for="_ in dropdownItems" :key="_._key" :class="`${cls}_dropdown-item`">
            <ElLink :underline="false" v-bind="_">{{ _.label }}</ElLink>
          </ElDropdownItem>
        </ElDropdownMenu>
      </template>
    </ElDropdown>
  </div>
</template>

<style lang="scss">
.ui-cell-btns {
  display: flex;
  align-items: center;
  > * + * {
    margin-left: 6px;
    &::before {
      content: '';
      display: inline-block;
      height: 1em;
      margin-right: 6px;
      border-left: 1px solid var(--el-border-color-light);
    }
  }
  &_dropdown-item {
    padding: 0 !important;
    .el-link {
      display: block;
      padding: 5px 16px;
      min-width: 88px;
      text-align: center;
    }
  }
}
</style>
